<html>
<head>
<link href="../style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="heading">
Button element (used with <a href="interfacedoc.html">Interface</a> module)
</p>
<p class="subheading">
Description:
</p>
<p>
This element is used to create buttons within an interface. Buttons can be either image
based, or text buttons with coloured backgrounds. Buttons can be grouped together to
create the equivalent of radio buttons in a form. So when one button is pressed in, all
the others in the group will not be pressed in. Otherwise, they act as normal form buttons,
and will pop out after being pressed.
</p>
<p class="subheading">
To use:
</p>
<p>
The code for this element is included in the <a href="interfacedoc.html">interface module</a>,
linked as follows:
</p>
<p class="jcode">
&lt;script language="Javascript" src="gamelib_interface.js"&gt;&lt;/script&gt;
</p>
<p>
You then instantiate a button object by using one of the following methods depending if it's
a text type button, or an image type button (the parameters are commented in the examples, you
can obviously have all the parameters on the same line, but I've spaced them out to help make
things more readable.):
</p>

<p class="jcode">

// Example of a text button<br /><br />

&nbsp;	myButton=new In_Button(<br />
&nbsp;&nbsp;	155,					// x position<br />
&nbsp;&nbsp;	128,					// y position<br />
&nbsp;&nbsp;	80,					// width<br />
&nbsp;&nbsp;	20,					// height<br />
&nbsp;&nbsp;	"text",				// type of button<br />
&nbsp;&nbsp;	"myButton6.setLegend('Fred')",// statement to be executed when button clicked<br />
&nbsp;&nbsp;	"Button 4",				// button text<br />
&nbsp;&nbsp;	"#aaaa88",				// button mouse out color<br />
&nbsp;&nbsp;	"#ddddbb",				// button mouse over color<br />
&nbsp;&nbsp;	"#ffff00",				// button mouse click color<br />
&nbsp;&nbsp;	"#000000",				// button border color<br />
&nbsp;&nbsp;	"#000000",				// button font color<br />
&nbsp;&nbsp;	2					// font size for button text<br />
&nbsp;	);
</p>

<p class="jcode">

// Example of an image button<br /><br />

&nbsp;	myButton=new In_Button(<br />
&nbsp;&nbsp;		110,					// x position<br />
&nbsp;&nbsp;		125,					// y position<br />
&nbsp;&nbsp;		60,					// width<br />
&nbsp;&nbsp;		20,					// height<br />
&nbsp;&nbsp;		"image",				// type of button<br />
&nbsp;&nbsp;		"alert('Button 1 pressed!')",	// statement to be executed when button clicked<br />
&nbsp;&nbsp;		"../images/button1.gif",	// button initial image<br />
&nbsp;&nbsp;		"../images/button1.gif",	// button mouse out image (usually same as above)<br />
&nbsp;&nbsp;		"../images/button1hi.gif",	// button mouse over image<br />
&nbsp;&nbsp;		"../images/button1click.gif"	// button mouse click image<br />
&nbsp;	);

</p>

<p class="subheading">
List of methods for Buttons
</p>

<p>
<a href="#click">click</a><br>
<a href="#clearRadio">clearRadio</a><br>
<a href="#makeRadio">makeRadio</a><br>
<a href="#setAction">setAction</a><br>
<a href="#setColors">setColors</a><br>
<a href="#setImages">setImages</a><br>
<a href="#setLegend">setLegend</a><br>
</p>

<p class="subheading">
Descriptions of methods for Buttons
</p>

<table>
<tr>
<th>Method</th><th NOWRAP>Parameters</th><th>Description</th>
</tr>

<tr>
<a name="click">
<td>click</td><td>(none)</td><td>
The equivalent of clicking the button with the mouse. This will cause the button's action
to fire. If it's a radio button, then it will be pressed down and the others in the group
will return to/stay in their up state.
</td>
</tr>

<tr>
<a name="clearRadio">
<td>clearRadio</td><td>(none)</td><td>
This method destroys a radio group. If any button in a group has this method called, the
entire group disappears, so no buttons formerly in the group will be linked.
</td>
</tr>

<tr>
<a name="makeRadio">
<td>makeRadio</td><td>List of Button Objects</td><td>
This will create a radio button group between this button and the buttons listed
as the argument to this method. Once the buttons have been grouped together, their
behaviour will change so that only one can ever be pressed at a time, and the last
button to be pressed will stay in the pressed state until another from the same
group is pressed. Their actions still function as normal.
</td>
</tr>

<tr>
<a name="setAction">
<td>setAction</td><td>String</td><td>
Sets the button's action. This can be any legal javascript statement, but would normally
be a function call.
</td>
</tr>

<tr>
<a name="setColors">
<td>setColors</td><td>color, color, color</td><td>
This method can only be used with text type buttons. It changes the normal, mouseover and clicked
colours for the button, in that order. All 3 colors must be specified.
</td>
</tr>

<tr>
<a name="setImages">
<td>setImages</td><td>URL, URL, URL</td><td>
This method can only be used with image type buttons. It changes the images used for the buttn's
normal, mouse over and clicked states, in that order. All 3 image URLs must be specified.
</td>
</tr>

<tr>
<a name="setLegend">
<td>setLegend</td><td>String</td><td>
This method can only be used with text type buttons. It changes the text on the face of the button.
</td>
</tr>

</table>


</body>
</html>